<template>
  <div>
    <el-cascader
      ref="cascaderHandle"
      v-model="inputValue"
      :options="dataOptions"
      :props="defaultProps"
      size="small"
      :placeholder="placeholder"
      :clearable="clearable"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: "TCascader",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    /**
     * 禁用状态
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否多选
     */
    multiple: {
      type: Boolean,
      default: false,
    },
    /**
     * 可被勾选的 checkbox 的最大数量
     */
    max: {
      type: Number,
      default: 0,
    },
    /**
     * 占位符
     */
    placeholder: {
      type: String,
      default: "请选择",
    },
    /**
     * 数据源
     */
    options: {
      type: [Array],
      default: () => {
        return [];
      },
    },
    /*
    配置选项
    */
    otherProps: {
      type: Object,
      default: () => ({}),
    },
    /*
    是否支持清空选项
    */
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      defaultProps: {
        multiple: this.multiple,
        expandTrigger: "hover",
        ...this.otherProps,
      },
    };
  },
  computed: {
    // 选中值
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
    // 选择器数据源
    dataOptions() {
      return this.options || [];
    },
  },
  methods: {
    handleChange(value) {
      if (!this.multiple) {
        this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
        this.$emit("changeVal", value);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
